<template>
  <div  style="width:100%">
      <el-row  type="flex" align="start"  justify="space-between" >
        <div>时间 
            <el-date-picker
            v-model="time"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
            </el-date-picker>
            <el-radio-group @change="changeTime" text-color="white"  v-model="steelTime">
                    <el-radio-button label="3">近7天</el-radio-button>
                    <el-radio-button label="4">近14天</el-radio-button>
                    <el-radio-button label="0">近30天</el-radio-button>
                    <el-radio-button label="1">按时间对比</el-radio-button>
            </el-radio-group>
         </div>
         <div>
            来源 
            <el-select v-model="source" placeholder="请选择">
                <el-option
                v-for="item in sourceArr"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
            区域
            <el-select v-model="source" placeholder="请选择">
                <el-option
                v-for="item in sourceArr"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
            门店
            <el-select v-model="source" placeholder="请选择">
                <el-option
                v-for="item in sourceArr"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
         </div>
      </el-row>
      <el-row>
          指标
        <el-select v-model="target" placeholder="请选择">
            <el-option
            v-for="item in targetArr"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
        </el-select>
        <chart :chartStyle="'min-width:20rem;min-height:30rem;height:30rem'"  ref="analysis" :option="analysisOption" />
      </el-row>
  </div>
</template>
<script>
import chart from "@/components/Charts/chart";
export default {
    name:'conduittion',
    components: {
      chart
    },
    data() {
          return {
              analysisOption:{},
              time:[],
              steelTime:[],
              source:'0',
              sourceArr:[
                  {
                      label:'lei',
                      value:'0',
                  }
              ],
              target:'',//指标
              targetArr:[{
                      label:'全部',
                      value:'0',
                  },{
                      label:'出售',
                      value:'1',
                  },{
                      label:'出租',
                      value:'2',
                  },{
                      label:'租售',
                      value:'3',
                  }],
          }
    },
    mounted () {
        this.fetchData()
    },
    methods:{
        initAnalysisChart(){
                var xData = [
                "有效房源",
                "实勘房源",
                "独家房源",
                "已成交",
                "暂不租售",
                ];
                var data1 = {
                    data: [60, 50, 49, 120, 60],
                    type: "line"
                    };
                    var initData = {
                    //需要给我传的数据
                    // exchange:true,//xy轴数据互换
                    xData: xData,
                    yData: [data1],
                    color: ["#5282E6", "#ABDB9D", "#3EB37F", "#FECA64", "#FF854A", "#FF6567","#E870B8"],
                    legend: [],
                    yAxisName: "套",
                    refName: "analysis",
                    returnOption: "analysisOption",
                    textColor: "black",
                    stack: "one",
                    xAxisLine: {
                        axisLabel: {
                        textStyle: {
                            color: "white"
                        }
                        },
                        axisLine: {
                        lineStyle: {
                            color: "#656a83"
                        }
                        },
                        splitLine: {
                        show: false,
                        lineStyle: {
                            color: "#262544"
                        }
                        }
                    },
                    yAxisLine: {
                        axisLabel: {
                        textStyle: {
                            color: "white"
                        }
                        },
                        axisLine: {
                        lineStyle: {
                            color: "#656a83"
                        }
                        },
                        splitLine: {
                        show: true,
                        lineStyle: {
                            color: "#656a83"
                        }
                        }
                    }
                    };
                    this.forEachFun(initData);
        },
         forEachFun(initData) {
          //处理数据生成Option
          var option = this.$utils.returnItemSeries(initData);
          this.$set(this, initData.returnOption, option);
          var self = this;
          setTimeout(function() {
            if (self.$refs[initData.refName][0]) {
              self.$refs[initData.refName][0].initChart();
            } else {
              self.$refs[initData.refName].initChart();
            }
          }, 0);
      },
        fetchData(){
            this.initAnalysisChart()
        },
        changeTime(res){

        }
    }
}
</script>

<style>

</style>
